<template>
  <svg t="1657351474943" class="fullStar" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
       p-id="3377" width="200" height="200" v-for="index of this.fullAmount" :key="index">
    <path
        d="M784.16441 645.6c-3.8 3.7-5.5 9-4.6 14.2L835.36441 985c1.8 10.3-6.4 18.7-15.8 18.7-2.5 0-5-0.6-7.5-1.9L520.16441 848.3c-2.3-1.2-4.9-1.8-7.5-1.8s-5.1 0.6-7.5 1.8l-292.1 153.5c-2.5 1.3-5 1.9-7.5 1.9-9.3 0-17.5-8.4-15.8-18.7L245.66441 659.8c0.9-5.2-0.8-10.5-4.6-14.2L4.86441 415.3C-4.63559 406 0.56441 389.9 13.66441 388l326.5-47.5c5.2-0.8 9.7-4 12-8.8l146-295.9c2.9-5.9 8.6-8.9 14.3-8.9s11.4 3 14.3 8.9l146 295.9c2.3 4.7 6.8 8 12 8.8L1011.66441 388c13.1 1.9 18.4 18 8.9 27.3L784.16441 645.6z"
        p-id="3378" fill="#f8de66">
    </path>
  </svg>
  <svg t="1657351506345" class="halfStar" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
       p-id="3632" width="200" height="200" v-for="index of this.halfAmount" :key="index">
    <path
        d="M1020.53613 415.3c9.5-9.3 4.3-25.4-8.9-27.3l-326.5-47.5c-5.2-0.8-9.7-4-12-8.8l-146-295.9c-2.9-5.9-8.6-8.9-14.3-8.9s-11.4 3-14.3 8.9l-146 295.9c-2.3 4.7-6.8 8-12 8.8L13.73613 388c-13.1 1.9-18.4 18-8.9 27.3l236.3 230.3c3.8 3.7 5.5 9 4.6 14.2L190.03613 985c-1.8 10.3 6.4 18.7 15.8 18.7 2.5 0 5-0.6 7.5-1.9l292.1-153.5c2.3-1.2 4.9-1.8 7.5-1.8s5.1 0.6 7.5 1.8l292.1 153.5c2.5 1.3 5 1.9 7.5 1.9 9.3 0 17.5-8.4 15.8-18.7L779.73613 659.8c-0.9-5.2 0.8-10.5 4.6-14.2l236.2-230.3zM716.63613 670.6L755.93613 900l-206-108.3c-1.7-0.9-3.5-1.7-5.2-2.5V216.3l71 143.8c11.7 23.6 34.2 40 60.2 43.8l230.3 33.5-166.6 162.4c-18.9 18.3-27.5 44.8-23 70.8z"
        p-id="3633" fill="#f8de66">
    </path>
  </svg>
  <svg t="1657351529591" class="emptyStar" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
       p-id="3883" width="200" height="200" v-for="index of this.emptyAmount" :key="index">
    <path
        d="M512.73613 151.4l103 208.7c11.7 23.6 34.2 40 60.2 43.8l230.3 33.5-166.6 162.4c-18.9 18.4-27.5 44.9-23 70.8L755.93613 900l-206-108.3c-11.4-6-24.3-9.2-37.2-9.2-12.9 0-25.8 3.2-37.2 9.2L269.53613 900l39.3-229.4c4.5-26-4.2-52.4-23-70.8L119.23613 437.3l230.3-33.5c26.1-3.8 48.6-20.1 60.2-43.8l103-208.6M512.73613 27c-5.7 0-11.4 3-14.3 8.9l-146 295.9c-2.3 4.7-6.8 8-12 8.8L13.73613 388c-13.1 1.9-18.4 18-8.9 27.3l236.3 230.3c3.8 3.7 5.5 9 4.6 14.2L190.03613 985c-1.8 10.3 6.4 18.7 15.8 18.7 2.5 0 5-0.6 7.4-1.9l292.1-153.5c2.3-1.2 4.9-1.8 7.4-1.8s5.1 0.6 7.4 1.8l292.1 153.5c2.5 1.3 5 1.9 7.4 1.9 9.3 0 17.5-8.4 15.8-18.7l-55.8-325.2c-0.9-5.2 0.8-10.5 4.6-14.2l236.3-230.3c9.5-9.3 4.3-25.4-8.9-27.3l-326.5-47.4c-5.2-0.8-9.7-4-12-8.8l-146-295.9c-3-6-8.7-8.9-14.4-8.9z"
        p-id="3884" fill="#f8de66">
    </path>
  </svg>
</template>

<script>
export default {
  name: "DynamicRatingStars",

  data() {
    return {
      fullAmount: 0,
      halfAmount: 0,
      emptyAmount: 0,
    }
  },
  props: {
    rating: {
      type: Number,
      required: true
    }
  },
  created() {
    // 按照rating的值来判断显示的星星数量
    this.fullAmount = Math.floor(this.rating);
    this.halfAmount = this.rating - this.fullAmount > 0 ? 1 : 0;
    this.emptyAmount = 5 - this.fullAmount - this.halfAmount;
  },
}
</script>

<style scoped>
svg {
  height: 0.8rem;
  width: 0.8rem;
}
</style>